<h2>客户管理</h2>
    <div style="margin:10px 0;"></div>
       <table id="customerList"  title="客户列表" style="height:600px;text-align:center"
            data-options="singleSelect:true,url:null,method:'get',fitColumns:'true',remoteSort:'false',sortOrder:'desc',sortName:'name',toolbar:'#tb',pagination:true">
        <thead>
            <tr>
                <th data-options="field:'name',width:80" sortable="true">姓名</th>
            	<th data-options="field:'items',width:80">整形项目</th>
            	<th data-options="field:'customerType',width:80">客户类型</th>
                <th data-options="field:'cell',width:80">电话</th>
                <th data-options="field:'sex',width:70" sortable="true">性别</th>
                <th data-options="field:'province',width:80" sortable="true">省份</th>
                <th data-options="field:'city',width:80" sortable="true">城市</th>
                <th data-options="field:'qq',width:80">QQ</th>
                <th data-options="field:'weixin',width:80">微信</th>
                <th data-options="field:'email',width:80">email</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="padding:5px;height:auto">
        <div style="margin-bottom:5px;vertical-align:middle">
            <a href="#" onclick="javascript:customerListJs.openAddCustomer()" class="easyui-linkbutton" iconCls="icon-add" plain="true">增加客户</a>
            <a href="#" onclick="javascript:customerListJs.openEditCustomer()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
            <a href="#" onclick="javascript:customerListJs.openAddAnalysis()" class="easyui-linkbutton" iconCls="icon-small_chart" plain="true">创建报表</a>
            
            <a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">地区</a>
                <div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:middle;width:200px;height:auto">
                	<div class="fitem">
                		<p>指定地区名过滤客户</p>
            		</div> 
        			<div class="fitem">
                		<input name="customer_location">
            		</div>     
         			<div>
        				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:customerListJs.SearchByLocation()">搜索</a>
    				</div> 
    			</div>
    		<a href="#"  class="easyui-menubutton" data-options="menu:'#mm1'">名字或者联系信息</a>
    		<div id="mm1" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left;display:none">
    			<form id="findCustomerfm" method="post" novalidate>
            		<div class="fitem">
                		<p>可以通过姓名,手机,QQ,Email,微信等信息查询</p>
            		</div> 
           			<div class="fitem">
                		<input name="valueSearch">
            		</div>     
         			<div>
        				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:customerListJs.invokeSearch()">搜索</a>
    				</div>                                              
        		</form>    
    		</div>
    		<a href="#" id="itemButton">整形项目</a>
    		<div id="mm2" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left;width:200px;height:auto;display:none">
    				<div class="ftitle">指定整形项目过滤客户</div>
    			    <div id="items_list" class="fitem">
            		</div> 
    		</div>
    		<a href="#" id="customerTypeButton">客户类型</a>
    		<div id="mm4" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left;width:200px;height:auto;display:none">
    				<div class="ftitle">客户类型过滤</div>
    			    <div id="customerType_list" class="fitem">
            		</div> 
    		</div>
        </div>
        <div id="searchFilter">
        </div>
    </div>


	
	<div id="CustomerAction" title="添加客户" class="easyui-dialog" style="width:600px;height:500px;padding:10px 20px;"
            closed="true">
    </div>
    <div id="CustomerDetail" title="客户详细信息" class="easyui-dialog"  closed="true" style="width:850px;height:550px">
    </div>
    <div id="CustomerAnalysis" title="客户分析" class="easyui-dialog"  closed="true" style="width:850px;height:450px">
    </div>
    <div id="addAnalysis" title="客户分析" class="easyui-dialog"  closed="true" style="width:600px;height:450px;padding:10px 20px;">
    		<div class="ftitle">创建报表(分析当前搜索结果)</div>
    		<div class="fitem">
                	<label>标题:</label>
                <input name="title"  id="addAnalysis_title" class="easyui-validatebox" style="width:245px" required="true">
            </div>
        	<div class="fitem">
                	<label>描述:</label>
                    <textarea name="content" id="addAnalysis_content" style="width:300px;height:100px"></textarea>
            </div>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:customerListJs.analysis()">创建</a>
    </div>
    <script type="text/javascript">
(function(customerListJs, $, undefined ) {     
	var countPerPage = 5;
	var start = 0;
	var customer_location_search = "";
	var customer_contact_search = "";
	var customer_items_search = "";
	var customer_type_search = "";
	
	var customer_type;
	var zxmr_items;
	
	customerListJs.clearSearch = function()
	{
		countPerPage = 5;
		start = 0;
		customer_location_search  = '';
		customer_contact_search = '';
		customer_items_search = '';
		customer_type_search = '';
		refreshSearchFilter();
		refreshCustomer();
	};
    var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
        renderRow: function(target, fields, frozen, rowIndex, rowData){
            var cc = [];
            cc.push('<td colspan=' + fields.length + ' ondblclick="javascript:customerListJs.openAction()" style="width:97%;padding:10px 5px;border-bottom: 1px solid #ddd;">');
            if (!frozen){
            	cc.push('<div style="width:100%;height:60px;clear:both;float:left">');
                var img = 'images/head.jpg';
                if(typeof rowData.image != 'undefined' && rowData.image != "")
                {
                	img = rowData.image;
                }
                cc.push('<div class="customerPhoto" style="background:url('+img+') no-repeat;"><img src="'+img+'" alt="" /></div>');
                cc.push('<div style="padding-left:10px;float:left;height:50px;width:90%">');
                for(var i=0; i<fields.length; i++){
                    var copts = $(target).datagrid('getColumnOption', fields[i]);
                    cc.push('<span class="c-label">' + copts.title +' :  '+rowData[fields[i]]+ '</span> ' );
                }
                cc.push('</div>');
                cc.push('</div>');
            }
            cc.push('</td>');
            return cc.join('');
        }
    });
    customerListJs.init = function(){
    
        $('#customerList').datagrid({
            view: cardview,
            iconCls:'icon-customer',
            pageSize:countPerPage,
            pageList:[5,10,15,20,25],
        });
    	$('#customerList').datagrid('getPager').pagination({   
    	    displayMsg:'当前显示从 [{from}] 到 [{to}] 共[{total}]条记录',   
    	    onSelectPage : function(pPageIndex, pPageSize) {   
    	    	
    	        var gridOpts = $('#customerList').datagrid('options');   
    	        gridOpts.pageNumber = pPageIndex;   
    	        gridOpts.pageSize = pPageSize;     

    	        start = (pPageIndex -1)*pPageSize;
    	        postSearch();
    	    },
    	    onChangePageSize : function(pageSize){
    	    	countPerPage = pageSize;
    	    }
    	}); 
    	customerListJs.clearSearch();
    	customerActionJs.setCustomerActionCallBack(customerListJs.CustomerActionCompelete);
    	workbenchJs.loadData("dispatch/manage/item/all",customerListJs.setItemsInput,"查询整形项目");
    	workbenchJs.loadData("dispatch/manage/customerType/all",customerListJs.loadCustomerTypes,"查询客户类别");
		
    };

    customerListJs.loadCustomerTypes = function(result){
        if(result.result == "SUCCESS")
        {
        	customer_type = jQuery.parseJSON(result.payload.value);
        	
    		var html = "";
    		$(customer_type).each(function(index){
    			html+='<p><a href="#" onclick="javascript:customerListJs.searchByCustomerType(\''+customer_type[index].name+'\')"> '+customer_type[index].name+' </a></p>';
    		});
    		$('#customerType_list').html(html);
    		
    		$('#customerTypeButton').menubutton({
    		    menu: '#mm4'
    		    });
        }
		
		
	};
	customerListJs.loadCustomerResult = function(result){
		$('#customerList').datagrid('loaded');
    	var res = result.result;
        if(res == "SUCCESS")
        {
        	var payload = jQuery.parseJSON(result.payload.value);
        	$('#customerList').datagrid('loadData',payload,"查询客户信息");
        }
	};

	customerListJs.openAddAnalysis = function()
	{
		$('#addAnalysis').dialog("open").dialog('setTitle','创建报表');
	}
	customerListJs.analysis = function()
	{
		var str = "";
		str = appendURL(str,"value="+customer_contact_search);
		str = appendURL(str,"location="+customer_location_search);
		str = appendURL(str,"items="+customer_items_search);
		str = appendURL(str,"type="+customer_type_search);
		str = appendURL(str,'start='+start+'&size='+countPerPage);
		str = appendURL(str,"reportTitle="+$('#addAnalysis_title').val());
		str = appendURL(str,"reportDesc="+$('#addAnalysis_content').val());
		$.ajax({
            type: "post",
            url: "dispatch/customer/analysis",
            dataType:"json",
            data: str,
            cache: false,
            success: function (result) {
                if(result.result == "SUCCESS")
                {
                	$('#addAnalysis').dialog("close");
                	var d = jQuery.parseJSON(result.payload.value);
                	reportJs.setData(d);
            		$('#CustomerAnalysis').dialog("open").dialog('setTitle','客户分析');
            		$('#CustomerAnalysis').dialog('refresh','component/customer/customerAnalysis.html');
                	//loadCustomerResult(result);
                }else if(result.result == "NOT_AUTHORIZED")
                {
                	$.messager.alert("Error","您没有权限生成报表");
                }else if(result.result == "COMPONENT_ERROR")
                {
                	$.messager.alert("Error",result.payload.value);
                }else
                {
                	$.messager.alert("Error",result.result);
                }
                

            }
		});
	};
	customerListJs.SearchByLocation = function(){
		
		var location = $("input[name='customer_location']").val();
		if(location == "")
		{
			alert("请输入查询条件");
		}else
			{
				customer_location_search = location;
				refreshSearchFilter();
				start = 0;
				postSearch();
			}
	};
	customerListJs.invokeSearch = function(){
		var value = $("input[name='valueSearch']").val();
		if(value == "")
		{
			alert("请输入查询条件");
		}else
		{
			customer_contact_search = value;
			refreshSearchFilter();
			start = 0;
			postSearch();
		}
	};
	customerListJs.searchByItem = function(name){
		
		customer_items_search = name;
		refreshSearchFilter();
		start = 0;
		postSearch();
		
	};
	customerListJs.searchByCustomerType = function(name){
		customer_type_search = name;
		refreshSearchFilter();
		start = 0;
		postSearch();
	};
	customerListJs.setItemsInput = function(result){
		zxmr_items = jQuery.parseJSON(result.payload.value);
		var html = "";
		$(zxmr_items).each(function(index){
			html+='<a href="#" onclick="javascript:customerListJs.searchByItem(\''+zxmr_items[index].name+'\')"> '+zxmr_items[index].name+' </a>';
		});
		$('#items_list').html(html);
		
		$('#itemButton').menubutton({
		    menu: '#mm2'
		    });
	};

	customerListJs.getSearchFilter = function()
	{
		var html = "查询条件:";
		if(customer_contact_search != "" && typeof(customer_contact_search) != 'undefined')
			html += customer_contact_search;
		
		if(customer_location_search != "" && typeof(customer_location_search) != 'undefined')
			html += " + "+customer_location_search;
		if(customer_items_search != "" && typeof(customer_items_search) != 'undefined')
			html += " + "+customer_items_search;
		if(customer_type_search != "" && typeof(customer_type_search) != 'undefined')
			html += " + "+customer_type_search;
		return html;
	};
	function refreshSearchFilter()
	{

		var html = customerListJs.getSearchFilter();
		html += ' <a href="javascript:void(0)" onclick="javascript:customerListJs.clearSearch()">清除</a>';
		$('#searchFilter').html(html);
		
	};
	function postSearch()
	{
		$('#customerList').datagrid("loading");
		var str = "";
		str = appendURL(str,"value="+customer_contact_search);
		str = appendURL(str,"location="+customer_location_search);
		str = appendURL(str,"items="+customer_items_search);
		str = appendURL(str,"type="+customer_type_search);
		str = appendURL(str,'start='+start+'&size='+countPerPage);
		$.ajax({
            type: "post",
            url: "dispatch/customer/all",
            dataType:"json",
            data: str,
            cache: false,
            success: function (result) {
            	
            	customerListJs.loadCustomerResult(result);
            }
		});
	};
	function appendURL(url,str1)
	{
		if(typeof(str1) == 'undefined')return url;
		if(url == "" || typeof(url) == 'undefined')url = str1;
		else url+="&"+str1;

		return url;
	};

	customerListJs.openAction = function(){
        var row = $('#customerList').datagrid('getSelected');
        if (row){
        	customerActionJs.setCustomerID(row.id);
    		$('#CustomerDetail').dialog("open").dialog('setTitle','客户详细信息');
    		$('#CustomerDetail').dialog('refresh','component/customer/viewCustomer.html');
        }else
        	{
        		$.messager.alert("Error","请选择一条记录");
        	}

	};

    var url;
 
    function refreshCustomer(){
    	$('#customerList').datagrid("loading");
    	workbenchJs.loadData("dispatch/customer/all?size="+countPerPage,customerListJs.loadCustomerResult,"查询客户信息")
    };


	function opendiag(uri,a,title){
		$('#CustomerAction').dialog("open").dialog('setTitle',title);
		$('#CustomerAction').dialog('refresh',uri);
		
	};
	customerListJs.CustomerActionCompelete = function(result){
		$('#CustomerAction').dialog('close');
		workbenchJs.loadData("dispatch/customer/all?start="+start+'&size='+countPerPage,customerListJs.loadCustomerResult,"查询客户信息");
		
	};
	function getEditCustomerData(){
		return $('#customerList').datagrid('getSelected');
	};

	customerListJs.openAddCustomer = function(){
    	customerActionJs.setCustomerAction('add');
    	opendiag('component/customer/addCustomer.html',this,'添加客户');
    };
    customerListJs.openEditCustomer = function(){
        var row = $('#customerList').datagrid('getSelected');
        if (row){
        	customerActionJs.setCustomerAction('edit');
        	customerActionJs.setEditCustomerData(row);
        	opendiag('component/customer/addCustomer.html',this,'编辑客户');
        }else
        	{
        		$.messager.alert("Error","请选择一条记录");
        	}
    };
}( window.customerListJs = window.customerListJs || {}, jQuery ));   

$(function(){
	customerListJs.init();
});
    </script>
    <style type="text/css">
        #fm,#findCustomerfm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
         .c-label{
            display:inline-block;
            width:150px;
            height:24px;
            padding:0;
            line-height:24px
        }
        .customerPhoto{
			width:50px;
			float:left;
			margin:0;
			padding:0;
        }
        .customerPhoto img {
			width:50px;
			height:50px;
		}
    </style>